<script setup lang="ts">
import { ref } from 'vue'
const keyword = ref('')
const $emit = defineEmits(['keywordSearch'])
const isStyle = 2

/**
 * 搜索事件
 */
const handleSearch = (e: string) => {
  const formData = {
    keyWord: e,
  }
  $emit('keywordSearch', keyword.value)
  keyword.value = ''
  uni.navigateTo({
    url: `/basePackage/pages/searchPage/SearchPage?formData=${JSON.stringify(formData)}`,
  })
}
</script>
<template>
  <view class="search-box">
    <u-search
      v-model="keyword"
      :height="isStyle === 1 ? 84 : 66"
      class="search-box__search"
      placeholder="   请输入搜索内容"
      :shape="isStyle === 1 ? '' : 'round'"
      :show-action="keyword.length"
      maxlength="10"
      @focus="handleSearch"
    />
  </view>
</template>
<style lang="scss" scoped>
@include b(search-box) {
  padding: 0 16rpx 30rpx 28rpx;
  background: #fff;
  @include e(search) {
    font-size: 28rpx;
    width: 706rpx;
  }
}
</style>
